/*
*作者---wt
*
*/
<template>
    <div class='evaluate' v-show='isShow'>
        <div class='personnel'>
            <img :src='person.image' class='head'>
            <div>
                <p><span class='name' v-text='person.name'></span><span class='orderNumber' v-text="person.totalOrder + '单'">100单</span></p><br>
                <p class='personnelStart'>
                    <span v-for='k in num'>
                        <img src="../../assets/evaluate/smallstart1.png" v-if='person.score>k'>
                        <img src="../../assets/evaluate/smallstart0.png" v-if='person.score<=k'>
                    </span>
                    <span v-text = 'person.score' class='grade'></span>
                </p>
            </div>
        </div>
        <div class="ping">
            <p>
                <span class='service'>配送服务</span>
                <span>
                    <span v-for='(k,idx) in num' @click='changeStart(true,k)'>
                        <img src="../../assets/evaluate/start1.png" v-if='serviceStart>k'>
                        <img src="../../assets/evaluate/start0.png" v-if='serviceStart<=k'>
                    </span>
                </span>
            </p>
            <p>
                <span class='product'>商品口感</span>
                <span>
                    <span v-for='(k,idx) in num' @click='changeStart(false,k)'>
                        <img src="../../assets/evaluate/start1.png" v-if='productStart>k'>
                        <img src="../../assets/evaluate/start0.png" v-if='productStart<=k'>
                    </span>
                </span>
            </p>
        </div>
        <div class="content">
            <textarea placeholder="您的建议很重要,来点评一下吧..." v-model = 'content'></textarea>
        </div>
        <button class='post' @click='goPost'>提交</button>
    </div>
</template>
<script type="text/javascript">
export default {
  props:['sData'],
  data(){
    return{
        isShow:false,
        num:[0,1,2,3,4],
        person:'',
        serviceStart:0,
        productStart:0,
        content:''
    }
  },
  created () {
    m$.template({
        val:'',
    })
    this.getAjax(this.sData.url.evaluate,{ orderId : this.$route.params.orderId},(res)=>{
        //取消成功再次获取数据
        if(res && res.status==200){
            this.isShow = true;
            m$.template({
                val:'',
                time:100
            })
            this.person = res.data;
        }else {
            m$.template({
                val:'数据加载失败,请刷新重试',
                time:1500
            })
        }
    })
  },
  methods:{
    changeStart(oval,idx){
        if(oval){
            this.serviceStart = idx+1;
        }else{
            this.productStart = idx+1;
        }
    },
    goPost(){
        if(this.serviceStart==0||this.productStart==0){
             m$.template({
                val:'亲,没有完成评价不能提交哦',
                time:1500
             })
        }else{
            this.postAjax(this.sData.url.submitEvaluate,{ posterOrder : this.$route.params.orderId, postScore: this.serviceStart,score: this.productStart, content: this.content},(res)=>{
                if(res && res.status==200){
                    this.$router.replace('/orderList/-1');
                }else{
                    m$.template({
                        val:'提交失败,请稍后重试',
                        time:1500
                    }) 
                }
            })
        }
    }
  }
}
</script>
<style scoped lang="less">
    @import "evaluate";
</style>
